<template>
  <div class="product-detail">
    <breadcrumb :data-arr="breadcrumbs"/>
    <p class="title">{{ model.name }}</p>
    <p class="description">{{ model.description }}</p>
    <el-button v-if="isSuperAdmin" class="add-btn" type="primary" size="small" @click="addBtnClick()">添加</el-button>
    <add-enum ref="AddEnum" @reload="getDetail"/>
    <enums :data-arr="model.enums" @enumOptionClick="enumOptionClick"/>
  </div>
</template>

<script lang="ts">
  import { Component, Vue } from 'vue-property-decorator'
  import Breadcrumb from '@/components/global/breadcrumb/index.vue'
  import ArticleModel from '@/models/ArticleModel'
  import AddEnum from './com/addEnum/index.vue'
  import { AddEnum as AddEnumType } from './com/addEnum/types'
  import Enums from './com/enums/index.vue'
  import WPopView from '@/utils/popView'
  import { EnumOptionEmitQurty, EnumOptionType } from './com/enumOption/types'
  import { Getter } from 'vuex-class'

  @Component({
    name: 'ArticleListEnum',
    components: {
      Breadcrumb,
      AddEnum,
      Enums
    }
  })
  export default class ArticleListEnum extends Vue{

    @Getter('isSuperAdmin') isSuperAdmin!: boolean

    breadcrumbs = [
      { name: '项目列表', path: '/article/list' },
      { name: '详情' }
    ]

    model = new ArticleModel()

    /**
     * 获取详情数据
     */
    async getDetail() {
      const { id } = this.$route.params
      this.model._id = id
      await this.model.getDeatil()
    }

    /**
     * 添加按钮点击
     */
    addBtnClick() {
      (this.$refs.AddEnum as AddEnumType).show(this.model, true, this.model._id);
    }

    enumOptionClick(item: EnumOptionEmitQurty) {
      switch (item.type) {
        case EnumOptionType.ADD:
          (this.$refs.AddEnum as AddEnumType).show(item.model, true, this.model._id);
          break
        case EnumOptionType.EDIT:
          (this.$refs.AddEnum as AddEnumType).show(item.model, false, this.model._id);
          break
        case EnumOptionType.REMOVE:
          item.model.removeData(`确定要删除 ${item.model.name} 嘛？`).then(() => {
            WPopView.msgSuccess('删除成功')
            this.getDetail()
          })
      }
    }

    mounted() {
      this.getDetail()
    }
  }

</script>

<style scoped lang="scss">
.product-detail {
  position: relative;
  .title {
    text-align: center;
    font-size: 20px;
    color: rgb(241, 103, 107);
  }
  .time {
    text-align: center;
    font-size: 12px;
    color: #aaa;
  }
  .description {
    text-align: center;
    font-size: 14px;
    color: #999;
  }
  .add-btn {
    position: absolute;
    left: 0;
    top: 60px;
  }
}
</style>
